import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import {
    Card, Button, Row, Col,
    Form, Checkbox, Switch, Tabs,
    Select, DatePicker, Input, Radio,
    InputNumber, Table, Typography
} from 'antd';
import {
    PlusOutlined,
    ImportOutlined,
    PrinterOutlined,
} from '@ant-design/icons';

const { TabPane } = Tabs;
class ViewPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            visible: false,
            dataSource: []
        }
    }
    formRef = React.createRef();
    onFinish = (values) => {
        console.log(values)
    }
    render() {
        const layout = {
            labelCol: { span: 5 },
            wrapperCol: { span: 19 },
        };
        const columns = [
            {
                title: '项目',
                dataIndex: 'PackLine',
                key: 'PackLine',
            },
            {
                title: '收货类型',
                dataIndex: 'TranType',
                key: 'TranType',
            },
            {
                title: '收货数量',
                dataIndex: 'ReveiveQty',
                key: 'ReveiveQty',
            },
            {
                title: '已收货',
                dataIndex: 'Received',
                key: 'Received',
            },
            {
                title: '采购单',
                dataIndex: 'PONum',
                key: 'PONum',
            },
            {
                title: '项目',
                dataIndex: 'POLine',
                key: 'POLine',
            },
            {
                title: '收货行',
                dataIndex: 'PORelNum',
                key: 'PORelNum',
            },
            {
                title: '批号',
                dataIndex: 'LotNum',
                key: 'LotNum',
            },

        ];
        return (
            <PageHeaderWrapper>
                <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >
                    <p>
                        <Button type="primary" icon={<PlusOutlined />}>新增</Button>
                        <Button type="primary" htmlType="submit" style={{ marginLeft: 5 }}>保存</Button>
                    </p>
                    <Row gutter={[16, 16]}>
                        <Col span={12}>
                            <Card title="资源群组">
                                <Row>
                                    <Col span={12}>
                                        <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ offset: 5 }}>
                                            <Input.Group compact>
                                                <Form.Item
                                                    name={['ResourceGroup', 'ResourceGrpID']}
                                                    rules={[{ required: true, message: "资源群组必填" }]}>
                                                    <Input />
                                                </Form.Item>
                                                <Form.Item>
                                                    <Button type="primary">资源群组</Button>
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item label="描述" name={['ResourceGroup', 'Description']}>
                                            <Input style={{ width: 260 }} />
                                        </Form.Item>
                                        <Form.Item label="部门" name={['ResourceGroup', 'JCDept']}>
                                            <Select style={{ width: 200 }} placeholder="选择部门"></Select>
                                        </Form.Item>
                                        <Form.Item label="入料仓库" style={{ marginBottom: 0 }}>
                                            <Input.Group compact>
                                                <Form.Item name={['ResourceGroup', 'InputWhse']}>
                                                    <Select style={{ width: 150 }} placeholder="仓库">
                                                    </Select>
                                                </Form.Item>
                                                <Form.Item name={['ResourceGroup', 'InputBinNum']}>
                                                    <Input style={{ width: 100 }} placeholder="库位" />
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item label="出料仓库" style={{ marginBottom: 0 }}>
                                            <Input.Group compact>
                                                <Form.Item name={['ResourceGroup', 'OutputWhse']}>
                                                    <Select style={{ width: 150 }} placeholder="仓库">
                                                    </Select>
                                                </Form.Item>
                                                <Form.Item name={['ResourceGroup', 'OutputBinNum']}>
                                                    <Input style={{ width: 100 }} placeholder="库位" />
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                        <Form.Item label="反冲仓库" style={{ marginBottom: 0 }}>
                                            <Input.Group compact>
                                                <Form.Item name={['ResourceGroup', 'BackflushWhse']}>
                                                    <Select style={{ width: 150 }} placeholder="仓库">
                                                    </Select>
                                                </Form.Item>
                                                <Form.Item name={['ResourceGroup', 'BackflushBinNum']}>
                                                    <Input style={{ width: 100 }} placeholder="库位" />
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>
                                    </Col>
                                    <Col span={12}>
                                        <Form.Item style={{marginBottom:0}}>
                                            <Input.Group compact>
                                                <Form.Item
                                                    name={['ResourceGroup', 'Inactive']}
                                                    valuePropName="checked">
                                                    <Checkbox>无效</Checkbox>
                                                </Form.Item>
                                                <Form.Item
                                                    name={['ResourceGroup', 'SubContract']}
                                                    valuePropName="checked">
                                                    <Checkbox>外包</Checkbox>
                                                </Form.Item>
                                            </Input.Group>
                                        </Form.Item>

                                        <Form.Item
                                            label="排队时间"
                                            name={['ResourceGroup', 'QueHours']}>
                                            <InputNumber min={0} />
                                        </Form.Item>
                                        <Form.Item
                                            label="排程块数"
                                            name={['ResourceGroup', 'SchMachine']}
                                            rules={[{ required: true, message: "排程块数必填" }]}>
                                            <InputNumber min={1} />
                                        </Form.Item>
                                        <Form.Item
                                            label="日生产能力"
                                            name={['ResourceGroup', 'DailyProdQty']}
                                            rules={[{ required: true, message: "日生产能力必填" }]}>
                                            <InputNumber min={0} />
                                        </Form.Item>
                                        <Form.Item
                                            label="员工数量"
                                            name={['ResourceGroup', 'ProdCrewSize']}>
                                            <InputNumber min={1} />
                                        </Form.Item>
                                    </Col>
                                </Row>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card title="资源">
                                <Tabs defaultActiveKey="1" >
                                    <TabPane tab="明细" key="1">
                                        <Row>
                                            <Col span={12}>
                                                <Form.Item style={{ marginBottom: 0 }} wrapperCol={{ offset: 5 }}>
                                                    <Input.Group compact>
                                                        <Form.Item
                                                            name={['Resource', 'ResourceID']}
                                                            rules={[{ required: true, message: "资源必填" }]}>
                                                            <Input />
                                                        </Form.Item>
                                                        <Form.Item>
                                                            <Button type="primary">资源</Button>
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item label="描述" name={['Resource', 'Description']}>
                                                    <Input style={{ width: 260 }} />
                                                </Form.Item>
                                                <Form.Item label="入料仓库" style={{ marginBottom: 0 }}>
                                                    <Input.Group compact>
                                                        <Form.Item name={['Resource', 'InputWhse']}>
                                                            <Select style={{ width: 150 }} placeholder="仓库">
                                                            </Select>
                                                        </Form.Item>
                                                        <Form.Item name={['Resource', 'InputBinNum']}>
                                                            <Input style={{ width: 100 }} placeholder="库位" />
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item label="出料仓库" style={{ marginBottom: 0 }}>
                                                    <Input.Group compact>
                                                        <Form.Item name={['Resource', 'OutputWhse']}>
                                                            <Select style={{ width: 150 }} placeholder="仓库">
                                                            </Select>
                                                        </Form.Item>
                                                        <Form.Item name={['Resource', 'OutputBinNum']}>
                                                            <Input style={{ width: 100 }} placeholder="库位" />
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                                <Form.Item label="反冲仓库" style={{ marginBottom: 0 }}>
                                                    <Input.Group compact>
                                                        <Form.Item name={['Resource', 'BackflushWhse']}>
                                                            <Select style={{ width: 150 }} placeholder="仓库">
                                                            </Select>
                                                        </Form.Item>
                                                        <Form.Item name={['Resource', 'BackflushBinNum']}>
                                                            <Input style={{ width: 100 }} placeholder="库位" />
                                                        </Form.Item>
                                                    </Input.Group>
                                                </Form.Item>
                                            </Col>
                                            <Col span={12}>
                                                <Form.Item
                                                    wrapperCol={{ offset: 5 }}
                                                    name={['Resource', 'Inactive']}
                                                    valuePropName="checked">
                                                    <Checkbox>无效</Checkbox>
                                                </Form.Item>
                                                <Form.Item
                                                    label="排队时间"
                                                    name={['Resource', 'QueHours']}>
                                                    <InputNumber min={0} />
                                                </Form.Item>
                                                <Form.Item
                                                    label="日生产能力"
                                                    name={['Resource', 'DailyProdQty']}
                                                    rules={[{ required: true, message: "采购数量必填" }]}>
                                                    <InputNumber min={0} />
                                                </Form.Item>
                                            </Col>
                                        </Row>

                                    </TabPane>
                                    <TabPane tab="列表" key="2"></TabPane>
                                </Tabs>
                            </Card>
                        </Col>
                    </Row>

                </Form>
            </PageHeaderWrapper>
        )
    }
}
export default ViewPage;